import React, { Fragment, useEffect, useState, useRef } from 'react';
import style from './jumpBall.less';

export default function JumpBall() {
    const [lines, setLines] = useState([]);
    let beginPoint = useRef();
    let endPoint = useRef();
    function getElementPosition(e) {
        var x = 0, y = 0, width = 0, height = 0;
        if (e) {
            x = e.offsetLeft;
            y = e.offsetTop;
            width = e.scrollWidth;
            height = e.scrollHeight;
            e = e.offsetParent;
        }
        return { x, y, width, height };
    }
    useEffect(() => {
        svgChart();
    }, []);
    const svgChart = () => {
        // console.log(getElementPosition(beginPoint?.current));
        let begin = getElementPosition(beginPoint.current); // 起点
        let end = getElementPosition(endPoint.current); // 终点dom 
        let lines = [];
        for (let i = 0; i < 12; i++) {
            lines.push({
                name: `path${i}`,
                path: [
                    [end.x, end.y],
                    [-65 + (50 * i), 180],
                    [-65 + (50 * i), 28],
                    [begin.x, begin.y]
                ],
                lineStyle: {
                    fill: 'transparent',
                    stroke: '#006ecf',
                    strokeWidth: 1
                }
            });
        }
        setLines(lines);
    };

    return (
        <div className={style.jumpBox}>
            跳动的小球
            <div className={style.bg}>
                <span className={style.shade}></span>
                <svg
                    width="100%"
                    height="100%"
                    version="1.1">
                    <defs>
                        <pattern id="imgpattern" x="0" y="0"
                            width="40"
                            height="40"
                            style={{ position: 'absolute', zIndex: -1, left: '-20px' }}>
                            <image width="40" height="40"
                                xlinkHref="" />
                        </pattern>
                    </defs>
                    {
                        lines.map((d, indexs) => {
                            let path = [];
                            let index = indexs + 1;
                            d.path.forEach((p, i) => {
                                switch (i) {
                                    case 0:
                                        p = `M${p[0]},${p[1]}`;
                                        break;
                                    case 1:
                                        p = `C${p[0]},${p[1]}`;
                                        break;
                                    case 2:
                                        p = `${p[0]},${p[1]}`;
                                        break;
                                    case 3:
                                        p = `${p[0]},${p[1]}`;
                                        break;
                                }
                                path.push(p);
                            });
                            path = path.join(' ');
                            const { fill = 'transparent', stroke = '#000', strokeWidth = 2 } = d.lineStyle || {};
                            let dur = '7s';
                            let animatTime = 0;// Math.floor(Math.random() * 12) / 10;
                            if (index === 2 || index === 5 || index === 8 || index === 11) {
                                animatTime = 1;
                            } else if (index === 3 || index === 6 || index === 9 || index === 12) {
                                animatTime = 2;
                            } else {
                                animatTime = 0;
                            }
                            return (
                                <Fragment key={indexs.toString()}>
                                    <path
                                        key={d.id}
                                        fill={fill}
                                        stroke={stroke}
                                        strokeDasharray="3,3"
                                        d={path}
                                        strokeWidth={strokeWidth}
                                        className="path"
                                    />
                                    <rect x="-20" y="-20" width="40" height="40" fill="url(#imgpattern)">
                                        <animateMotion path={path} begin={animatTime} dur={dur} repeatCount="indefinite" />
                                    </rect >
                                </Fragment>
                            );
                        })
                    }
                </svg>
                <div className={style.beginPoint} ref={beginPoint}></div>
                <div className={style.endPoint} ref={endPoint}></div>
            </div>

        </div>
    );
}